import {
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import {Col, Modal, Row} from 'antd';
import React, { useState} from 'react';
import ReactJson from "@microlink/react-json-view";

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: API.InterfaceInfoVo) => void;
  onSubmit: (values: API.InterfaceInfoVo) => Promise<boolean>;
  updateModalVisible: boolean;
  values: Partial<API.InterfaceInfoVo>;
};
const CreateForm: React.FC<UpdateFormProps> = (props) => {
  const [requestParams,setRequestParams]=useState<JSON>(JSON.parse("{}"))
  const [requestHeader,setRequestHeader]=useState<JSON>(JSON.parse("{}"))
  const [responseHeader,setResponseHeader]=useState<JSON>(JSON.parse("{}"))
  return (
    <StepsForm
      stepsProps={{
        size: 'small',
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            width={640}
            bodyStyle={{
              padding: '32px 40px 48px',
            }}
            destroyOnClose={true}
            title={'创建接口'}
            visible={props.updateModalVisible}
            footer={submitter}
            onCancel={() => {
              props.onCancel();
            }}
          >
            {dom}
          </Modal>
        );
      }}
      onFinish={props.onSubmit}
    >
      <StepsForm.StepForm
        title={'基本信息'}
      >
        <ProFormText
          name="name"
          label={'接口名称'}
          width="md"
          rules={[
            {
              required: true,
              message: '请输入接口名称！',
            },
          ]}
        />
        <ProFormTextArea
          name="description"
          width="md"
          label={'接口描述'}
        />
      </StepsForm.StepForm>
      <StepsForm.StepForm
        title={"接口信息"}
      >
        <ProFormText
          name="url"
          label={'URL'}
          width="md"
          rules={[
            {
              required: true,
              message: '请输入URL',
            },
          ]}
        />
        <ProFormSelect
          name="method"
          label={'请求方式'}
          width="md"
          valueEnum={{
            GET: 'GET',
            POST: 'POST',
          }}
          rules={[
            {
              required: true,
              message: '请选择调用方式',
            },
          ]}
        />
        <ProFormSelect
          name="status"
          label={'接口状态'}
          width="md"
          valueEnum={{
            0: '关闭',
            1: '开启',
          }}
          rules={[
            {
              required: true,
              message: '请选择接口状态',
            },
          ]}
        />
      </StepsForm.StepForm>

      <StepsForm.StepForm
        onValuesChange={(_,values)=>{

          try {
            const tempRequestParams=JSON.parse(values.requestParams);
            setRequestParams(tempRequestParams);

          }catch (e) {
            setRequestParams(JSON.parse("{}"));
          }
          try {
            setRequestHeader(JSON.parse(values.requestHeader));
          }catch (e) {
            setRequestHeader(JSON.parse("{}"))
          }
          try {
            setResponseHeader(JSON.parse(values.responseHeader))
          }catch (e) {
            setResponseHeader(JSON.parse("{}"))
          }
        }}
        title={'参数信息'}
      >
        <Row>
          <Col>
            <ProFormTextArea
              fieldProps={{
                autoSize: true
              }}
              name="requestParams"
              width="md"
              label={'请求参数'}
            />
          </Col>
          <Col>
            <ReactJson src={requestParams}/>
          </Col>
        </Row>
        <Row>
          <Col>
            <ProFormTextArea
              fieldProps={{
                autoSize: true
              }}
              name="requestHeader"
              width="md"
              label={'请求头'}
              placeholder={'请求头信息'}
            />
          </Col>
          <Col>
            <ReactJson src={requestHeader}/>
          </Col>
        </Row>
        <Row>
          <Col>
            <ProFormTextArea
              fieldProps={{
                autoSize: true
              }}
              name="responseHeader"
              width="md"
              label={'响应头'}
              placeholder={'响应头信息'}
            />
          </Col>
          <Col>
            <ReactJson src={responseHeader}/>
          </Col>
        </Row>


      </StepsForm.StepForm>
    </StepsForm>
  );
};
export default CreateForm;
